<template>
	<view class="container">
		<!-- 状态筛选 -->
		<view class="filter-tabs">
			<uv-tabs :list="statusTabs" :current="currentIndex" @change="switchStatusByIndex" keyName="label"
				:scrollable="true" active-color="#fe5400" lineColor="#fe5400" inactive-color="#666"
				font-size="28"></uv-tabs>
		</view>

		<!-- 订单列表 -->
		<scroll-view class="order-list" scroll-y @scrolltolower="loadMore" refresher-enabled="true"
			:refresher-triggered="triggered" refresher-threshold="100" @refresherrefresh="onRefresh">
			<view class="list-container">
				<!-- 初始加载动画 -->
				<view class="loading-container" v-if="loading && list.length === 0">
					<uv-loading-icon mode="circle" size="36" color="#2979ff"></uv-loading-icon>
					<text class="loading-text">订单加载中...</text>
				</view>

				<!-- 空状态 -->
				<uv-empty v-else-if="!loading && list.length === 0" mode="data" :text="emptyText"
					marginTop="100"></uv-empty>

				<!-- 订单卡片 -->
				<view class="order-card" v-for="item in list" :key="item.id" @click="navigateToDetail(item)">
					<!-- 订单头部 -->
					<view class="card-header">
						<view class="order-info">
							<text class="order-no">订单号：{{ item.order_no }}</text>
							<text class="order-time">{{ item.createtime_text }}</text>
						</view>
						<view class="status-badge" :class="getStatusClass[item.state]">
							{{ getStatusText(item.state) }}
						</view>
					</view>

					<!-- 商品信息 -->
					<view class="goods-section" v-for="goods in item.ordergoods" :key="goods.id">
						<view class="goods-item">
							<uv-image :src="goods.image" width="120" height="120" radius="8"
								mode="aspectFill"></uv-image>
							<view class="goods-content">
								<text class="goods-title">{{ goods.title }}</text>
								<view class="goods-specs">
									<text class="spec-item">型号：{{ goods.model }}</text>
									<text class="spec-item">品牌：{{ goods.brand_name }}</text>
									<text class="spec-item">数量：{{ goods.number }}件</text>
								</view>
								<view class="goods-price">
									<text class="price">¥{{ goods.price }}</text>
									<!-- <text class="market-price">¥{{ goods.market_price }}</text> -->
								</view>
							</view>
						</view>
					</view>

					<!-- 订单统计 -->
					<view class="order-stats">
						<text class="total-count">共{{ item.ordergoods.length }}件商品</text>
						<view class="total-price">
							<text class="label">合计：</text>
							<text class="price">¥{{ item.pay.price }}</text>
						</view>
					</view>

					<!-- 订单底部 -->
					<view class="card-footer">
						<!-- <view class="customer-info">
							<text class="customer-name">{{ item.user.nickname }}</text>
							<text class="customer-phone">{{ item.user.mobile }}</text>
						</view> -->
						<view class="actions">
							<!-- <text class="action-btn" @click.stop="handleContact(item)">联系客户</text> -->
							<text class="action-btn primary" v-if="item.state === '2' && item.is_need_delivery === 0"
								@click.stop="handleDeliver(item)">
								立即发货
							</text>
							<text class="action-btn primary" v-if="item.state === '2' && item.is_need_delivery === 1"
								@click.stop="toDistribution(item)">
								配货
							</text>
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view class="load-more" v-if="hasMore && list.length > 0">
					<uv-loading-icon mode="circle" size="28"></uv-loading-icon>
					<text class="load-text">加载中...</text>
				</view>

				<view class="no-more" v-if="!hasMore && list.length > 0">
					<text class="no-more-text">没有更多数据了</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				refreshing: false,
				triggered: false,
				currentStatus: 'all',
				currentIndex: 0,
				statusTabs: [{
						label: '全部',
						value: 'all'
					},
					{
						label: '待付款',
						value: '1'
					},
					{
						label: '待发货',
						value: '2'
					},
					{
						label: '待收货',
						value: '3'
					},
					{
						label: '已完成',
						value: '4'
					},
					// {
					// 	label: '已评价',
					// 	value: '5'
					// },
					// {
					// 	label: '已完成',
					// 	value: '6'
					// },
					{
						label: '已取消',
						value: '7'
					}
				],
				list: [],
				pagination: {
					page: 1,
					per_page: 10,
					total: 0,
					last_page: 1
				}
			};
		},
		computed: {
			hasMore() {
				return this.pagination.page < this.pagination.last_page;
			},
			emptyText() {
				const statusMap = {
					'all': '暂无订单',
					'1': '暂无待付款订单',
					'2': '暂无待发货订单',
					'3': '暂无待收货订单',
					'4': '暂无已收货订单',
					'5': '暂无已评价订单',
					'6': '暂无已完成订单',
					'7': '暂无已取消订单'
				};
				return statusMap[this.currentStatus] || '暂无订单';
			},
			getStatusClass() {
				return {
					'1': 'status-pending',
					'2': 'status-wait-ship',
					'3': 'status-wait-receive',
					'4': 'status-received',
					'5': 'status-evaluated',
					'6': 'status-completed',
					'7': 'status-cancelled'
				};
			}
		},
		onLoad(option) {
			if (option.status) {
				this.currentIndex = option.status;
				this.currentStatus = option.status;
			}
			this.loadData(true);
		},
		methods: {
			// 通过索引切换状态
			switchStatusByIndex(item) {
				this.currentIndex = item.index;
				this.currentStatus = item.value;
				this.loadData(true);
			},

			// 加载数据
			async loadData(reset = false) {
				if (reset) {
					this.pagination.page = 1;
					this.list = [];
				}

				this.loading = true;

				try {
					const res = await uni.$uv.http.get('/supplier/getOrderList', {
						params: {
							page: this.pagination.page,
							status: this.currentStatus ?? this.currentStatus
						}
					});

					if (res.res.code === 1) {
						if (reset) {
							this.list = res.res.data.list || [];
						} else {
							this.list = [...this.list, ...(res.res.data.list || [])];
						}

						this.pagination = {
							page: res.res.data.current_page || 1,
							per_page: res.res.data.per_page || 10,
							total: res.res.data.total || 0,
							last_page: res.res.data.last_page || 1
						};
					} else {
						this.$wanlshop.msg(res.res.msg || '获取数据失败');
					}
				} catch (error) {
					console.error('获取订单列表失败:', error);
					this.$wanlshop.msg('获取失败，请稍后重试');
				} finally {
					this.loading = false;
					this.refreshing = false;
					this.triggered = false;
				}
			},

			// 下拉刷新
			onRefresh() {
				this.refreshing = true;
				this.triggered = true;
				this.loadData(true);
			},

			// 加载更多
			loadMore() {
				if (!this.loading && this.hasMore) {
					this.pagination.page++;
					this.loadData(false);
				}
			},

			// 获取状态文本
			getStatusText(state) {
				const statusMap = {
					'1': '待付款',
					'2': '待发货',
					'3': '待收货',
					'4': '已收货',
					'5': '已评价',
					'6': '已完成',
					'7': '已取消'
				};
				return statusMap[state] || '未知状态';
			},

			// 跳转到详情页
			navigateToDetail(item) {
				this.$wanlshop.to(`/pages/supplier/order/detail?order_id=${item.id}&order_no=${item.order_no}`)
			},

			// 联系客户
			handleContact(item) {
				uni.makePhoneCall({
					phoneNumber: item.user.mobile
				});
			},

			// 立即发货
			handleDeliver(item) {
				uni.showModal({
					title: '确认发货',
					content: `确定要发货订单 ${item.order_no} 吗？`,
					success: (res) => {
						if (res.confirm) {
							this.$wanlshop.to('/pages/supplier/order/deliver?id=' + item.id)
						}
					}
				});
			},

			// 跳转配货页面
			toDistribution(item) {
				this.$wanlshop.to('/pages/supplier/order/distribution?id=' + item.id)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* 筛选标签 */
	.filter-tabs {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 8rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	/* 订单列表 */
	.order-list {
		height: calc(100vh - 160rpx);
	}

	.list-container {
		padding-bottom: 30rpx;
	}

	/* 初始加载动画 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 0;

		.loading-text {
			font-size: 28rpx;
			color: #666;
			margin-top: 20rpx;
		}
	}

	/* 订单卡片 */
	.order-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 25rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.order-info {
				flex: 1;
				display: flex;
				flex-direction: column;

				.order-no {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 8rpx;
				}

				.order-time {
					font-size: 24rpx;
					color: #999;
				}
			}

			.status-badge {
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				font-weight: 500;

				&.status-pending {
					background: #fff0e8;
					color: #ff7900;
				}

				&.status-wait-ship {
					background: #e8f3ff;
					color: #2979ff;
				}

				&.status-wait-receive {
					background: #f0f7ff;
					color: #19be6b;
				}

				&.status-received {
					background: #e8f7f0;
					color: #19be6b;
				}

				&.status-evaluated {
					background: #f8f5ff;
					color: #7239ea;
				}

				&.status-completed {
					background: #f0f0f0;
					color: #666;
				}

				&.status-cancelled {
					background: #f5f5f5;
					color: #999;
				}
			}
		}

		.goods-section {
			margin-bottom: 20rpx;

			.goods-item {
				display: flex;

				.goods-content {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;

					.goods-title {
						font-size: 28rpx;
						font-weight: 500;
						color: #333;
						margin-bottom: 12rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.goods-specs {
						display: flex;
						flex-direction: column;
						gap: 6rpx;
						margin-bottom: 12rpx;

						.spec-item {
							font-size: 24rpx;
							color: #666;
						}
					}

					.goods-price {
						display: flex;
						align-items: center;
						gap: 16rpx;

						.price {
							font-size: 28rpx;
							font-weight: 600;
							color: #ff3b30;
						}

						.market-price {
							font-size: 24rpx;
							color: #999;
							text-decoration: line-through;
						}
					}
				}
			}
		}

		.order-stats {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-top: 1rpx solid #f5f5f5;
			border-bottom: 1rpx solid #f5f5f5;

			.total-count {
				font-size: 26rpx;
				color: #666;
			}

			.total-price {
				display: flex;
				align-items: baseline;

				.label {
					font-size: 26rpx;
					color: #333;
				}

				.price {
					font-size: 30rpx;
					font-weight: 600;
					color: #ff3b30;
				}
			}
		}

		.card-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20rpx;

			.customer-info {
				display: flex;
				flex-direction: column;

				.customer-name {
					font-size: 26rpx;
					color: #333;
					margin-bottom: 4rpx;
				}

				.customer-phone {
					font-size: 24rpx;
					color: #666;
				}
			}

			.actions {
				display: flex;
				gap: 16rpx;

				.action-btn {
					padding: 12rpx 24rpx;
					border: 1rpx solid #ddd;
					border-radius: 20rpx;
					font-size: 24rpx;
					color: #666;
					background: #fff;

					&.primary {
						background: #2979ff;
						color: #fff;
						border-color: #2979ff;
					}
				}
			}
		}
	}

	/* 加载更多 */
	.load-more,
	.no-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;

		.load-text,
		.no-more-text {
			font-size: 26rpx;
			color: #999;
			margin-left: 15rpx;
		}
	}
</style>